<template>
  <q-page>
    
    <q-inner-loading visible v-if="loading">
      <q-spinner-gears size="50px" color="primary" />
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <!-- header -->
    <q-toolbar color="primary" >
      <q-toolbar-title class="q-pa-none">
          <!-- <q-select style="width: 120px" inverted hide-underline v-model="currentType" :options="typesList" @input="typeChange" /> -->
      </q-toolbar-title>
      <q-toolbar-title shrink>
        <span slot="subtitle" class="text-right">
          <div><b>{{this.filteredAccounts.length}}</b>个</div>
          <div>当前筛选</div>
        </span>
      </q-toolbar-title>
    </q-toolbar>
    <div class="bg-white">
        <q-item style="padding:0;">
          <q-search 
            icon="mdi-account-search" 
            class="full-width no-shadow" 
            inverted-light 
            color="grey-2"
            placeholder="可通过分类、账号名称筛选" 
            autofocus="true"
            clearable
            :value="filter"
            @clear="filterResult('')" 
            @change="filterResult" 
            @input="filterResult"
        />
        </q-item>
    </div>
    <q-infinite-scroll :offset="100" :handler="loadmore" ref="infiniteScroll">
      <!-- list -->
      <q-list separator>
        <q-item v-if="!this.filteredAccounts.length && !loading">暂无数据</q-item>
        <q-item 
            class='column q-pa-none'
            v-for="(item) in this.filteredAccounts" 
            :key="'user_'+item.caasid" 
            :to="'/douyin/' + item.caasid"
        >
            <q-item class="full-width"
            >
                <q-item-side :avatar="item.avatar" />
                <q-item-main>
                    <q-item-tile label>
                        {{item.name}} {{item.douyinid}}
                        <q-chip color="primary" class='q-mr-xs' dense v-for="(tag,idx) in item.tags.split(',')" :key="'tag_'+ idx">{{tag}}</q-chip>
                    </q-item-tile>
                    <div class="q-mt-sm">
                        <q-chip class="q-mr-xs" dense>作品：{{formatNumbers(item.videoCount)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>获赞：{{formatNumbers(item.upAva)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>粉丝：{{formatNumbers(item.fanCount)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>评论：{{formatNumbers(item.commentAva)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>转发：{{formatNumbers(item.shareAva)}}</q-chip>
                    </div>
                </q-item-main>
                <q-item-side right icon="mdi-chevron-right" />
            </q-item>
            
            <q-item class="full-width q-pt-none">
                <q-item-main>

                </q-item-main>
                <q-btn 
                      class="q-mr-sm"
                      right dense outline
                      icon="mdi-eye" label="预览" color='orange-8'
                      :href="item.url" target="_blank" type='a'
                      v-if="isMobile" @click.stop
                />
                <q-btn 
                      class="q-mr-sm"
                      right dense outline
                      icon="mdi-eye" label="预览" color='orange-8'
                      v-else
                      @click.stop.prevent="previewAccount(item)"
                />

                <q-btn 
                      @click.stop.prevent="removeAccounts(item)"
                      right dense outline
                      icon="delete_outline"
                      label="删除"
                      color='grey-8'
                  />
            </q-item>
        </q-item>
      </q-list>
    </q-infinite-scroll>

    <q-modal class="drawer_video" v-model="showRight" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">
        <div class="account_frame">
            <iframe :src="this.accountUrl" id="showIframe" />
        </div>
    </q-modal>
  </q-page>
</template>

<script>
/**
 * "accountid": "vipidy",
  "accountname": "电影工厂",
  "category": "影视",
  "score": 1094,
  "dailyTotal": 86269,
  "headReadAva": 52737,
  "dailyReadAva": 29327,
  "favorAva": 896,
 */
export default {
  name: 'PageIndexOffical',
  data () {
    return {
      isMobile: true,
      filter: '',     
      modal: false,
      currentUser: {},
      limit: 20,
      page: 1,
      list: [],
      originList: [],
      loading: true,
      timer: null,
      showRight: false,
      accountUrl: 'about:blank'
    }
  },
  mounted() {
    this.$api.ui.pageTitle = '抖音账号管理';
    this.loadCategories();
    this.loadAllAccounts();
    console.log( 'is.mobile:', this.$q.platform )
    this.isMobile = this.$q.platform.is.mobile
    // this.$refs.scroll && this.$refs.scroll.loadMore();
  },
  methods: {
      loadCategories(page, done) {
        let me = this;
        this.$api.offical.loadCategories( data => {
            // this.loading = false
            // console.log( data )
            this.allCategories = [...data]
        });
      },
      loadAllAccounts( ){
          this.$api.douyin.getAccounts( data => {
            this.loading = false
            this.originList = [...data]
            // this.currentCategory = this.$q.sessionStorage.get.item( 'currentCategory' ) || '全部分类'
            // console.log('this.currentCategory:::', this.currentCategory )
            // if( this.currentCategory === '全部分类' ){
            //   this.resetList()
            // } else {
            //   this.changeCategory( this.currentCategory, true )
            // }
          })  
      },
      formatNumbers( num ){
          let number = '' + num
          let showStr = ''
          if ( number > 9999 ){
              showStr = Math.floor(number /  10000) + 'w+'
          } else if ( number > 999 && number < 10000){
              showStr = Math.floor(number / 1000 ) + 'k+'
          } else {
              showStr = number
          }

          return showStr
      },
      filterResult( value ){
        this.filter = value
      },
      removeAccounts( item ) {
        let { userid, caasid } = item;
        //   console.log( this.$q.dialog )
        let _dialog = this.$q
            .dialog({
                dark: true,
                title: "确认",
                message: "确认删除该账号吗？",
                cancel: "取消",
                ok: "确认删除",
                persistent: true
            })
            .then(() => {
                this.$api.douyin.deleteAccount(userid, () => {
                    for (let i = 0; i < this.list.length; i++) {
                        let _localItem = this.list[i];
                        if (_localItem.userid == userid) {
                            this.list.splice(i, 1);
                            this.$q.notify({
                                message: "删除成功",
                                position: "center",
                                timeout: 1500,
                                color: "negative"
                            });
                            break;
                        }
                    }
                });
            })
            .catch(() => {
                console.log("cancel");
            });
      },
      loadmore(){

      },
      previewAccount( item ) {
        this.showRight = true
        this.accountUrl = item.url 
      }
  },
  computed: {
    filteredAccounts() {
        let _list = [...this.originList]
        let query = this.filter.toLowerCase();
        if( !query.length ){
            return _list
        }
        console.log( query )
        _list = this.originList.filter( item => {
            let { name, tags } = item
            if( ~name.indexOf( query ) || ~tags.indexOf( query ) ){
                return true
            }
            return false
        })
        return _list
    }
  }
}
</script>

<style>
main div.q-btn-inner>i:last-child {
  display:none;
}

.q-input-chips .q-chip {
  margin: 5px;
}

.accoutAvatar{
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px;
    border-radius: 40px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6 );
}
.account_frame{
    width: 650px;
    height: 600px;
}
.account_frame iframe{
    background: #0E0F1A;
    border: none;
    height: 100%;
    width: 100%;
}
</style>
